<!DOCTYPE html>
<html lang="zh-cn">
<head>

<!-- meta -->
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!-- title -->
<title>KBlog | 技术分享</title>
<!-- css -->
<link rel="shortcut icon" type="text/css" href="/img/favicon.ico" />
<link rel="stylesheet" type="text/css"
	href="/webshow/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="/webshow/index/css/kblog.css" />
<link rel="stylesheet" type="text/css"
	href="/webshow/index/css/kblog_comments.css" />
<link rel="stylesheet" type="text/css"
	href="/webshow/index/css/kblog_auth.css" />
<link rel="stylesheet" type="text/css"
	href="/webshow/index/js/jquery.Jcrop.min.css" />
<!-- 标签云样式 -->
<link rel="stylesheet" type="text/css"
	href="/webshow/index/css/jQCloud.css" />
<!-- 字体图标样式 -->
<!-- <link rel="stylesheet" type="text/css"
	href="/webshow/index/css/font-awesome.min.css" /> -->

<!-- js -->


</head>
<body id="kblog" scroll="no">
	<header id="kblog-header" class="navbar navbar-inverse navbar-fixed-top navbar-kblog">
		
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle = "collapse" data-target = "#kblog-navbar-collapse">
					<span class="sr-only">切换导航条</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<div class="navbar-brand">ZXFBlog</div>
			</div>
			<div id="kblog-navbar-collapse" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="">
						<a href="/indexs/index">
							<span class="glyphicon glyphicon-home"></span>博客首页
						</a>
					</li>

					<li class="">
						<a href="/indexs/getallArticles">
							<span class="glyphicon glyphicon-globe"></span>全部文章
						</a>
					</li>

					<li class="">
						<a href="/indexs/pictureIndex">
							<span class="glyphicon glyphicon-star-empty"></span>图片信息
						</a>
					</li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
				
					<li th:if="${session.userInfo} == null">
						<a id="nav-login" data-toggle="modal" data-target="#login-modal" style="padding-right: 0px;cursor: pointer;" data-original-title="" title="">登录</a>
					</li>
					<li th:if="${session.userInfo} != null">
						<a th:text="${session.userInfo} == null? '':'欢迎'+${session.userInfo.username}"/>
					</li>

					<li>
						<a id="nav-register" data-toggle="modal" data-target="#register-modal" style="padding-right: 0px;cursor: pointer;">注册</a>
					</li>
				</ul>	
			</div>
		</div>
	</header>
	<div id="login-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="margin-top: 20%;">
			<div class="modal-content">
				<div class="modal-header" >
					<button class="close" type="button" data-dismiss="modal" aria-hidden="true">  ×  </button>
					<h4 id="myModalLabel" class="modal-title"> 用户登录 </h4>
				</div>
				<div class="modal-body clearfix">
					<form id="login-form" class="form-horizontal" method="post" role="form">
						<div class="form-group">
							<label class="col-sm-2 control-label" for="username">用户名<span class="required">*</span></label>
							<div class="col-sm-6">
								<input id = "username" name="username" class="form-control"  required="required" placeholder="请输入用户名..." type="text"/>
							</div>

							<div id="forgetpassword" style="margin-right: 90px;">
							<a href="/forgetpassword/">忘记密码?</a>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-2 control-label" for="password">密码 <span class="required">*</span></label>
							<div class="col-sm-6">
								<input id = "password" name="password" class="form-control"  required="required" placeholder="请输入密码..." type="password"/>
							</div>

							<button id="login-button" class="btn btn-primary" type="submit" style="margin-right: 90px;">
								登录
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<div id="register-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="margin-top: 20%;">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" type="button" data-dismiss="modal" aria-hidden="true">  ×  </button>
					<h4 id="myModalLabel" class="modal-title"> 用户注册 </h4>
				</div>
				<div class="modal-body clearfix">
					<form id="register-form" data-parsley-validate class="form-horizontal form-label-left" action="">
						<!-- <input type="hidden" name="csrftoken" value="9ipHVVEIK5nz8DWNuDEU66bwynD7LDOt"/> -->
						<div class="form-group">
							<label class="col-sm-2 control-label" for="username">用户名 <span class="required">*</span></label>
							<div class="col-sm-6">
								<input id = "username" name="username" class="form-control" required="required" placeholder="请输入用户名..." type="text"/>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-2 control-label" for="loginame">昵称 <span class="required">*</span></label>
							<div class="col-sm-6">
								<input id = "loginame" name="loginame" class="form-control" required="required" placeholder="请输入昵称..." type="text"/>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-2 control-label" for="password">密码 <span class="required">*</span></label>
							<div class="col-sm-6">
								<input id = "password" name ="password" class="form-control" required="required" placeholder="请输入密码..." type="password"/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label" for="password2">确认密码 <span class="required">*</span></label>
							<div class="col-sm-6">
								<input id = "password2"  name ="password2" class="form-control" required="required" placeholder="请再次输入密码..." type="password"/>
							</div>

							 <button class="btn btn-primary" type="button">取消</button>
						  <button class="btn btn-primary" type="reset">重置</button>
                          <button type="submit" class="btn btn-success">添加</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<div class="kblog-main">
		<div id="kblog-content" class="container">
			<div class="row">
				<div id="kblog-content" class="col-md-8 col-lg-9">
					<div id="article-page" class="well">
						<ol class="breadcrumb">
							<li><a href="/"><span class="glyphicon glyphicon-home"></span>
							</a>
							</li>
							<li><a href="">
							<th:block th:switch="${article.channelid}">
											  <td th:case=1>军事</td>
											  <td th:case=2>财经</td>
											  <td th:case=3>社会</td>
											  <td th:case=4>历史</td>
											  <td th:case=5>文化</td>
											</th:block>
						       </a>
							</li>
							<li class="hidden-xs"><a><span
									class="glyphicon glyphicon-calender"></span><td th:utext="${#calendars.format(article.publishdate,'yyyy-MM-dd')}" /></a>
							</li>
							<li><a> <span class="glyphicon glyphicon-eye-open"></span>
									1212 </a></li>
							<li class="pull-right"><a> <span
									class="glyphicon glyphicon-user"></span> <td th:utext=" ${article.author}" /> </a></li>
						</ol>

						<div id="article">
							<div class="article-title">
								<h1>
									<p th:text=" ${article.title}" />
								</h1>
							</div>
							<div class="article-tag">
								<a href="/tags/spring/"> 
								   <span class="label label-kblog-1 btn"> <th:block th:switch="${article.channelid}">
											  <td th:case=1>军事</td>
											  <td th:case=2>财经</td>
											  <td th:case=3>社会</td>
											  <td th:case=4>历史</td>
											  <td th:case=5>文化</td>
											</th:block> </span> 
								</a> 
								<!-- <a href="/tags/java/">
								   <span class="label label-kblog-2 btn">java</span>
								</a> -->
							</div>
							<hr />

							<div class="article-content">


								<td th:utext=" ${article.content}" />

							</div>
						</div>
					</div>

					<!-- 评论区 -->

					<div id="anchor-quote"></div>
					<div class="well">
						<div class="kblog-comment">
							<div class="kblog-content-tx">
								<img src="/webshow/index/img/avatar.jpg" width="40"></img>
							</div>
							<div class="kblog-comment-edit clearfix">
								<form id="review-form" class="form-horizontal" method="post" role="form">
									<!-- <input type="hidden" name="csrftoken"
										value="9ipHVVEIK5nz8DWNuDEU66bwynD7LDOt" />${session.userInfo} == null? '':'欢迎'+${session.userInfo.username} -->
									<input type="hidden" id="userid" name="userid" th:value="${session.userInfo} == null? '':${session.userInfo.userid}"/>
									<input type="hidden" id="articleid" name="articleid" th:value=" ${article.articleid}" />
									<!-- <input type="hidden" id="replyid" name="replyid" th:value=" ${article.articleid}"/> -->
									<textarea id="content" name="content" class="form-control" rows="4" placeholder="请输入评论内容，限200字！">
										
									</textarea>
									<button type="submit" class="btn btn-kblog-comments pull-right">提交</button>
								</form>
							</div>

							<ul>
							<th:block th:if="${not #lists.isEmpty(reviewlist)}">
							<th:block th:each="product:${reviewlist}">
							<li>
									<div class="kblog-comment-tx">
										<img src="/webshow/index/img/avatar.jpg" width="40"></img>
									</div>
									<div class="kblog-comment-content">
										<a>
											<h1><td th:text="${product.userid}"/></h1>
											<p></p>
											<p>评论： <td th:text="${product.content}"/></p>
											<p>
												<td th:text="${#dates.format(product.adddata, 'yyyy-MM-dd')}"/>
												&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <!-- <a
													class='quote' href="#anchor-quote"
													onclick="return CommentQuote('bluex',98);">回复</a> -->
											</p> </a>
									</div></li>
							</th:block>
							</th:block>
								
							</ul>

						</div>
					</div>
				</div>

				<!-- 右边的widgets -->
				<div id="kblog-side" class="col-md-4 col-lg-3 hidden-xs">
					<div>
						<!-- <div id="tags_cloud" class=""> -->

					</div>

					<!-- 关于我 -->
				<div id="kblog-aboutme">
					<div class="panel panel-kblog" > 
						<div class="panel-heading">
							<h3 class="panel-title">
								<span class="glyphicon glyphicon-user"></span>
								<p th:text=" ${user.username}" />
								<span class="glyphicon glyphicon-remove btn panel-close pull-right"></span>
								<span class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right" data-toggle="collapse" data-target="#about-me"></span>
							</h3>
						</div>
						
						<div id="about-me" class="profile-block">
							<div>
								<img id="avatar" src="/webshow/index/img/avatar.jpg" class="img-circlestyle"/>
							</div>
							<!-- <h2 id="name">Oubayeung</h2> -->
							<!-- <h5 id="title" style="margin: 1.6em 0em">我是一枚爱折腾的万金油</h5> -->
							<div class="spanstyle">
								<span id="location">
									<i class="glyphicon glyphicon-map-marker">中国-北京-朝阳</i>
								</span>
							</div>
							<div class="seeme">
								<a id="follow" class="btn btn-info" target="_blank" href="https://github.com/oubayeung"> 关注我 </a>
							</div>

							<div class="article-info-block">
								<p th:text=" ${user.posts}" />
								<span>
									文章
								</span>
							</div>
							
							<div class="article-info-block">
								<p th:text=" ${user.followers}" />
								<span>
									粉丝
								</span>
							</div>
							<div class="article-info-block">
								<p th:text=" ${user.following}" />
								<span>
									关注
								</span>
							</div>

							<div class="profile-block social-links">
								<div>
									<table class="tablestyle">
										<tbody class="tbodystyle">
											<tr>
										
												<td class="tdstyle">
													<a class="fas" href="https://github.com/oubayeung" target="_blank" title="github">
														<i class="fa fa-github "></i>
													</a>
												</td>
												
												<td class="tdstyle">
													<a class="fas" href="https://git.oschina.net/oubayeung" target="_blank" title="git">
														<i class="fa fa-git"></i>
													</a>
												</td>

											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div> 
					</div>
				</div>
				
					<!-- 检索 -->
				<div id="kblog-search">
					<div class="panel panel-kblog">
						<div class="panel-heading">
							<h3 class="panel-title">
								<span class="glyphicon glyphicon-search"></span>
								检索一下
								<span class="glyphicon glyphicon-remove btn panel-close pull-right"></span>
								<span class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right" data-toggle="collapse" data-target="#search-box"></span>
							</h3>
						</div>
						<div id="search-box">
							<form class="clearfix" role="form" method="post" action="/indexs/index">
								<!-- <span class="input-group glyphicon glyphicon-search"></span> -->
								<input class="search-in form-control" type="text" name="searchText" id="searchText" placeholder="请输入检索内容..."/>
								<!-- <span class="input-group-addon">搜索</span> -->
								<button class="btn btn-kblog">
									<span class="glyphicon glyphicon-search"></span>
								</button>
							</form>		
						</div>
					</div>
				</div>


					<!-- 热门推荐 -->
					<div id="kblog-hotest-posts">
						<div class="panel panel-kblog">
							<div class="panel-heading">
								<h3 class="panel-title">
									<span class="glyphicon glyphicon-flag"></span> 热门推荐 <span
										class="glyphicon glyphicon-remove btn panel-close pull-right"></span>
									<span
										class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right"
										data-toggle="collapse" data-target="#hotest-post-list"></span>
								</h3>
							</div>
							<ul id="hotest-post-list" class="list-group collapse in">
								 <tr th:each="product:${hotArticlelist}">
							<li class="list-group-item">
								<span class="hotest-post-title">
									<a href="" target="blank" th:href="@{/indexs/detailarticle(articleID=${product.articleid},title=${product.title},)}"><td th:text="${product.title}"/></a>
								</span>
								<span class="badge">100</span>
							</li>
							</tr>
							</ul>
						</div>
					</div>

					<!-- 最新评论 -->
					<div id="kblog-latest-comments">
						<div class="panel panel-kblog">
							<div class="panel-heading">
								<h3 class="panel-title">
									<span class="glyphicon glyphicon-comment"></span> 最新评论 <span
										class="glyphicon glyphicon-remove btn panel-close pull-right"
										data-dismiss="alert"></span> <span
										class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right"
										data-toggle="collapse" data-target="#latest-comment-list"></span>
								</h3>
							</div>
							<ul id="latest-comment-list" class="list-group collapse in">
								
									<th:block th:if="${not #lists.isEmpty(reviewlist)}">
							<th:block th:each="product:${reviewlist}">
							<li class="list-group-item clearfix">
									<div class="comment-tx">
										<img class="imgs-size" src="/webshow/index/img/tx/default.jpg"
											alt="" />
									</div><!-- 评论信息 -->
									<div class="comment-info">
									<!-- username -->
									<div class="comment-username">
											<a href="#"><td th:text="${product.userid}"/> 评论：</a>
										</div>
										<!-- comment -->
										<div class="comment-content">
											<a href="/article/blog.html"> <td th:text="${product.content}"/> </a>
										</div>
									</div>
										</li>
							</th:block>
							</th:block>
							</ul>
						</div>

					</div>

					<!-- 友情链接 -->
					<div class="kblog-links">
						<div class="panel panel-kblog">
							<div class="panel-heading">
								<h3 class="panel-title">
									<span class="glyphicon glyphicon-link"></span> 友情链接 <span
										class="glyphicon glyphicon-remove btn panel-close pull-right"></span>
									<span
										class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right"
										data-toggle="collapse" data-target="#links"></span>
								</h3>
							</div>

							<div id="links" class="padding10 list-group collapse in">
								<a href="#" target="_blank" title="Spring boot"
									class="btn btn-xs btn-primary">Spring boot</a> <a href="#"
									target="_blank" title="Mybatis Plus"
									class="btn btn-xs btn-success">Mybatis Plus</a> <a href="#"
									target="_blank" title="Hibernate" class="btn btn-xs btn-info">Hibernate</a>
								<a href="#" target="_blank" title="Oracle"
									class="btn btn-xs btn-warning">Oracle</a> <a href="#"
									target="_blank" title="Spark" class="btn btn-xs btn-default">Spark</a>
							</div>
						</div>
					</div>

					<!-- 标签云 -->
					<div class="kblog-tags">
						<div class="panel panel-kblog">
							<div class="panel-heading">
								<h3 class="panel-title">
									<span class="glyphicon glyphicon-tags"></span> 标签云 <span
										class="glyphicon glyphicon-remove btn panel-close pull-right"></span>
									<span
										class="glyphicon glyphicon-chevron-up btn panel-collapse pull-right"
										data-toggle="collapse" data-target="#tags-cloud"></span>
								</h3>
							</div>

							<div id="tags-cloud"
								class="tags-cloud padding10 list-group collapse in"></div>
						</div>
					</div>
				</div>
			</div>

			<!-- <div id="toTop" class="fa fa-angle-up" style="display: block;left: 1499.88px;">
			
		</div> -->

		</div>


		<!-- footer -->
		<div>
			<footer>
				<div class="container">
					<p class="text-conter"></p>
				</div>
			</footer>
		</div>

		
	</div>
	
	<script type="text/javascript"
	src="/webshow/index/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/webshow/index/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/webshow/index/js/jquery.form.js"></script>
<!-- <script type="text/javascript" src="./static/jquery/jquery.Jcrop.js"></script> -->
<script type="text/javascript" src="/webshow/index/js/jQCloud.js"></script>
<script type="text/javascript"
	src="/webshow/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/webshow/index/js/kblog.js"></script>
<script type="text/javascript">
		var word = [
			{text: "Maven",weight:33},
			{text: "Spring",weight:25},
			{text: "Security",weight:45},
			{text: "Hibernate",weight:20},
			{text: "Mybatis",weight:22},
			{text: "bootstrap",weight:15},
			{text: "Linux",weight:31},
			{text: "Sprong Boot",weight:15},
			{text: "ORM",weight:15}
		];

		$(function() {
			$('#tags-cloud').jQCloud(word);
		});

	</script>
</body>


</html>

